<template>

  <div class="toast " :class="toastType">
      <i class="iconfont" :class="$store.state.toastIcon"></i><span>{{$store.state.toastMsg}}</span>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    computed:{
        toastType(){
                let type = 'success'
                switch(this.$store.state.toastIcon){
                    case 'icon-toast-shibai_huaban':
                        type = 'dander'
                        break;
                    case 'icon-toast-jinggao':
                        type = 'warning'
                        break;
                }
                return type
            }
    }
}
</script>

<style lang="less" scoped>
.toast{
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #fff;
    .iconfont{
        margin-right: 10px;
    }
    &.success{
        background-color: rgb(57, 221, 84);
        color: rgb(39, 160, 119);
    }
    &.dander{
        background-color: rgb(230, 129, 129);
        color: rgb(133, 32, 19);
    }
    &.warning{
        background-color: rgb(235, 238, 85);
        color: rgb(39, 199, 132);
    }
}
</style>